<template>
  <div class="mod-pic">
    <div class="mod-pic-main">
      <div :class="['pic-col-l', { hide: current == 0 }]" @click="clickL"></div>
      <div class="pic-col-s" @click="clickS"></div>
      <div
        :class="['pic-col-r', { hide: current == pics.length - 1 }]"
        @click="clickR"
      ></div>
      <img :src="pics[current].originUrl" alt="" />
    </div>
    <div class="mod-pic-col" v-if="pics.length > 1">
      <ul class="pic-col-list clearfix">
        <li
          v-for="i in pics.length"
          :key="i"
          :class="[
            'pic-col-point',
            { 'pic-col-point-current': i - 1 == current },
          ]"
          @click="clickP(i - 1)"
        >
          <i class="point"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pics: {
      type: Array,
      default() {
        return [];
      },
    },
    currentItem: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {
      current: this.currentItem,
    };
  },
  mounted() {},
  methods: {
    clickL() {
      if (this.current != 0) {
        this.current--;
      }
    },
    clickS() {
      this.$emit("putBox");
    },
    clickR() {
      if (this.current != this.pics.length - 1) {
        this.current++;
      }
    },
    clickP(index) {
      this.current = index;
    },
  },
};
</script>

<style>
.mod-pic {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.mod-pic-main {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.pic-col-l,
.pic-col-s,
.pic-col-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.3%;
}
.pic-col-l {
  left: 0;
  cursor: url(../../assets/images/left.png), pointer;
}
.pic-col-s {
  left: 33.3%;
  cursor: url(../../assets/images/small.png), pointer;
}
.pic-col-r {
  left: 66.6%;
  cursor: url(../../assets/images/right.png), pointer;
}
.pic-col-l.hide,
.pic-col-r.hide {
  cursor: url(../../assets/images/ban.png), pointer;
}
.mod-pic-main img {
  width: 100%;
}
.mod-pic-col {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 20px;
  line-height: 20px;
}
.pic-col-list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.pic-col-point {
  float: left;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
}
.pic-col-point .point {
  display: inline-block;
  width: 0;
  height: 0;
  border: 3px solid #999;
  border-radius: 3px;
}
.pic-col-point-current .point {
  border: 4px solid var(--color-theme);
  border-radius: 4px;
}
</style>